<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorate="~{layout/storelayout}">
<head>
    <title>会员充值</title>
</head>
<body>
<div layout:fragment="content">
    <fieldset class="layui-elem-field">
        <legend>会员 - 充值</legend>
        <div class="layui-field-box">
            <div class="layui-form" lay-filter="example">
                <div class="layui-input-block" style="float: left; position: relative;">
                    <label class="layui-form-label">会员搜索</label>
                    <input style="width: auto;" type="text" id="card" name="card"  lay-verify="required" placeholder="请输入会员卡/手机号" autocomplete="off" class="layui-input">
                </div>
                <input type="text" id="storeId" name="storeId" th:value="${session.storeManage.id}" hidden/>
                <button id="button" type="submit" class="layui-btn"  data-type="getInfo" style="float: left;">搜索</button>
            </div>
            <table class="layui-table" lay-even="" lay-skin="row">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>会员卡号</th>
                    <th>姓名</th>
                    <th>手机号</th>
                    <th>余额</th>
                    <th>操作</th>
                </tr>
                </thead >
                <tbody id="tab" >

                </tbody>
            </table>
        </div>
    </fieldset>
    <!--    <script>-->
    <!--        //JavaScript代码区域-->
    <!--        layui.use(['element','layer','jquery'], function(){-->
    <!--            var element = layui.element;-->
    <!--            var $ = layui.jquery, layer = layui.layer;-->
    <!--        });-->
    <!--    </script>-->
    <!--    <script th:src="@{/js/recharge.js}" type="text/javascript"></script>-->
    <script  type="text/javascript">

        layui.use(['form','layer'], function(){
            var form = layui.form;
            var $ = layui.jquery, layer = layui.layer;

            $('#button').click(function () {
                var xmlhttp = new XMLHttpRequest();
                //获取表单值
                var card = $('#card').val();
                var data = 'card=' + card;
                // alert(data)
                xmlhttp.open("GET","/storeRecharge/select?" + data, true);
                xmlhttp.send();
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                        var json = JSON.parse(xmlhttp.responseText);
                        var list = json.length;
                        var table = $("#tab");
                        var html = [];
                        for (var i = 0; i < list; i++) {
                            html.push("<tr>");
                            html.push("<input type='text' hidden='hidden' id='card' value='" + json[0]["cardId"] + "'>");
                            html.push("<th>" + json[i]["cardId"] + "</th>");
                            html.push("<th>" + json[i]["name"] + "</th>");
                            html.push("<th>" + json[i]["iphone"] + "</th>");
                            html.push("<th>" + json[i]["balance"] + "</th>");
                            html.push("<th><button data-method='offset' data-type='auto' id='recharge' type='button' class='layui-btn layui-btn-xs'>充值</button></th>");
                            html.push("</tr>");
                        }
                        // 清空数据
                        table.html("");
                        // 添加到页面中
                        table.append(html);
                    }
                }
            });

            // js 充值弹窗
            var active = {
                offset: function(othis){
                    var id = $('#card').val();
                    // alert(id);
                    var type = othis.data('type')
                        ,text = othis.text();
                    layer.open({
                        title : false,
                        type: 1
                        ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                        ,id: 'layerDemo'+type //防止重复弹出
                        ,content: '<div style="padding: 50px 50px;">'
                            +'<div class="layui-form-item">'
                            +'<label class="layui-form-label layui-bg-green">充值金额：</label>'
                            +'<div class="layui-input-block">'
                            +'<input type="text" name="card" id="card" hidden="hidden" value="'+id+'">'
                            +'<input type="text" name="price" id="price" autocomplete="off" required="required" placeholder="请输入扣费金额" class="layui-input">'
                            +'</div>'
                            +'</div>'
                            +'<button type="submit" id="cz" class="layui-btn layui-btn-fluid">充值</button>'
                            +'</div>'
                        ,closeBtn : 1
                        ,btn: '关闭'
                        ,btnAlign: 'c' //按钮居中
                        ,shade: 0.1 //显示遮罩
                        ,yes: function(){
                            layer.close(layer.index);
                        }
                    });
                }
            };
            // 充值弹窗
            $(document).on('click','#recharge', function(){
                var othis = $(this), method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            });

            //输入金额点击提交后进行充值操作
            $(document).on('click','#cz', function(){
                var xmlhttp = new XMLHttpRequest();
                var price = $('#price').val();
                var card = $('#card').val();
                var storeId = $('#storeId').val();
                $.ajax({
                    url: '/storeRecharge/pm',
                    type: 'GET',
                    dataType: 'json',
                    data: {card: card,price: price,storeId: storeId},
                    success:function(data){
                        if (data != null){
                            layer.alert('充值成功！', {icon: 1, title:'提示'}, function(){
                                layer.closeAll();
                            });
                        }else{
                            layer.alert('充值失败，请稍后重试！', {icon: 2, title:'提示'}, function(){
                                layer.closeAll();
                            });
                        }
                    }
                })
            });
        });
    </script>
</div>
</body>
</html>